<template>
  <a-form
    labelAlign="left"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    :colon="false"
  >
    <template v-if="currentField">
      <a-form-item label="表格中隐藏">
        <a-switch v-model:checked="currentField.hiddenInTable" />
      </a-form-item>
      <a-form-item label="表头标题">
        <a-input v-model:value="currentField.title" @input="handleTitleInput" />
      </a-form-item>
      <a-form-item label="宽度">
        <a-input-number
          style="width: 100%"
          :precision="0"
          :min="20"
          v-model:value="currentField.width"
        />
      </a-form-item>
      <a-form-item label="作为查询条件">
        <a-switch
          v-model:checked="currentField.queryConfig.isQuery"
          @change="handleQueryChange"
        />
      </a-form-item>
      <a-form-item label="查询条件类型" v-if="currentField.queryConfig.isQuery">
        <a-select
          v-model:value="currentField.queryConfig.type"
          @change="handleTypeChange"
        >
          <a-select-option
            v-for="fieldType in fieldMenuList"
            :key="fieldType.type"
            :value="fieldType.type"
          >
            {{ fieldType.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </template>
  </a-form>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { useTableStore } from "@/store/table";
import { fieldMenuList } from "@/components/RuntimeComp";
import { fieldFactory } from "@/views/TableGenerator/util";

const store = useTableStore();
const { currentField } = storeToRefs(store);

function handleQueryChange(isQuery) {
  if (isQuery) {
    currentField.value.queryConfig = {
      ...currentField.value.queryConfig,
      ...fieldFactory(
        "input",
        currentField.value.title,
        currentField.value.dataIndex
      ),
    };
  } else {
    currentField.value.queryConfig = {
      isQuery: false,
    };
  }
}

function handleTitleInput() {
  if (currentField.value.queryConfig.isQuery) {
    currentField.value.queryConfig.label = currentField.value.title;
  }
}

function handleTypeChange(newType) {
  const { queryConfig } = currentField.value;
  const newQueryConfig = fieldFactory(
    newType,
    queryConfig.label,
    queryConfig.formKey,
    [],
    false,
    false
  );
  currentField.value.queryConfig = {
    isQuery: true,
    ...newQueryConfig,
  };
}
</script>

<style lang="less" scoped></style>
